<!--
 * @Descripttion: 
 * @version: 
 * @Author: zhangfan
 * @email: 2207044692@qq.com
 * @Date: 2021-07-27 15:08:51
 * @LastEditors: zhangfan
 * @LastEditTime: 2021-08-04 18:04:44
-->
<template>
  <div
    :class="isFullScreen ? 'container fullCon' : 'container'"
    style="min-width: 1400px"
  >
    <el-row :gutter="10" class="screen">
      <el-col :span="7" class="elcol">
        <div
          class="left drawbg enterpriseStatistics"
          style="margin-bottom: 10px"
        >
          <!-- 企业统计 -->
          <enterprise-statistics :area="area"></enterprise-statistics>
        </div>
        <div class="left drawbg warningCenter" style="margin-bottom: 10px">
          <!-- 预警中心 -->
          <!-- <early-warning :area="area" ref = "early"></early-warning> -->
          <!-- 制度落实比例 -->
          <systemRatio :area="area" ref="systemRatio"></systemRatio>
        </div>
        <div class="left drawbg complaintHandling">
          <!-- 投诉处理 -->
          <complaintHandling :area="area" ref="complaint">></complaintHandling>
        </div>
      </el-col>
      <el-col :span="10" class="elcol projectVideo">
        <div class="projectSearchBox">
          <div
            :class="
              isFullScreen
                ? 'left drawbg middleSearch'
                : 'left drawbg middleSearchBox'
            "
          >
            <div class="searchIconLeft" @click="nextProject"></div>
            <ul class="projectName" @click="showProjectList">
              <li
                v-show="index == mark"
                v-for="(item, index) in projectOptions"
                :key="index"
              >
                <span>{{ item.projectName }}</span>
              </li>
            </ul>
            <div class="searchIconRight" @click="previousProject"></div>
          </div>
          <div v-if="!isFullScreen" class="setBtn" @click="setEzhouBigScreen">
            <div class="setIcon"></div>
          </div>
        </div>
        <ul class="searchList" v-show="!isShow">
          <li
            v-for="(item, index) in projectOptions"
            :key="index"
            @click="selectProject(item, index)"
          >
            <span>{{ item.projectName }}</span>
          </li>
        </ul>
        <div class="left drawbg middleTop" style="margin-bottom: 10px">
          <videoSurveillance ref="videoSurveil"></videoSurveillance>
        </div>
        <div class="left drawbg middleBottom">
          <!-- 花名册Tab -->
          <roster :isFullScreen="isFullScreen"></roster>
        </div>
      </el-col>
      <el-col :span="7" class="elcol">
        <div class="left drawbg employ" style="margin-bottom: 10px">
          <employStatus :area="area" ref="employStatus"></employStatus>
        </div>
        <div class="left drawbg workInjury" style="margin-bottom: 10px">
          <commInsurance :area="area"></commInsurance>
        </div>
        <div class="left drawbg ille">
          <!-- 违法记载 -->
          <illegalRecords :area="area" ref="illegal"></illegalRecords>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
// 企业统计
import enterpriseStatistics from './enterpriseStatistics'
// 预警中心
import earlyWarning from './earlyWarning'
// 违法记载
import illegalRecords from './illegalRecords'
// 就业情况
import employStatus from './employStatus'
// 工伤保险
import commInsurance from './commInsurance'
// 投诉处理
import complaintHandling from './complaintHandling'
// 视频监控
import videoSurveillance from './videoSurveillance'
// 花名册tab
import roster from './roster'
//  制度落实比例
import systemRatio from './systemRatio'

export default {
  name: 'overView',
  data() {
    return {
      changeAreaData: '',
      isShow: 'false',
      mark: 0,
      projectName: '湖北省治理农民工欠薪工程项目',
      projectOptions: [],
      projectId: '',
    }
  },
  components: {
    enterpriseStatistics,
    earlyWarning,
    illegalRecords,
    complaintHandling,
    videoSurveillance,
    employStatus,
    commInsurance,
    roster,
    systemRatio,
  },
  props: {
    isFullScreen: {
      type: String,
      default: '',
    },
    area: {
      type: String,
      default: '',
    },
  },
  created() {
    this.getProjectList()
  },
  activated() {
    this.getProjectList()
  },
  watch: {
    isFullScreen(newVal, oldVal) {
      this.$refs.videoSurveil.changeSonSize()
      this.$refs.complaint.getHeight(newVal)
      this.$refs.illegal.resizeEchart()
      // this.$refs.early.earlyResizeEchart();
      this.$refs.employStatus.employSizeChart()
      this.$refs.systemRatio.systemRatioEchart()
    },
    area(val) {
      this.$store.commit('setEZhouArea', val)
    },
  },
  mounted() {},
  methods: {
    setEzhouBigScreen() {
      this.$router.push({
        path: '/home/unpaidComplaint/commandCenterConfig',
        name: 'commandCenterConfig',
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/unpaidComplaint/commandCenterConfig',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getProjectList() {
      const vm = this
      this.axios({
        method: 'post',
        url: 'api-r/ezrightbackpay/expand/getCloudList',
        data: {
          value: 1,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              vm.projectOptions = response.data.result.results
              vm.$store.commit('setEZhouprojectId', vm.projectOptions[0].name)
              vm.$store.commit(
                'setEZhouprojectName',
                vm.projectOptions[0].projectName
              )
              vm.$store.commit(
                'setEZhouVideoShowSrc',
                vm.projectOptions[0].remark
              )
              if (
                vm.projectOptions[0].remark != '默认云台' &&
                vm.projectOptions[0].remark
              ) {
                vm.$store.commit('setIsShowVideo', true)
              } else {
                vm.$store.commit('setIsShowVideo', false)
              }
              vm.$refs.videoSurveil.getAccessToken()
              vm.$refs.videoSurveil.changeSonSize()
              vm.$refs.videoSurveil.getProjectdetail()
            } else {
              vm.$message({
                message: response.data.errorMsg,
                type: 'error',
              })
            }
          },
          (response) => {
            this.$message({
              message: '数据请求失败',
              type: 'error',
            })
          }
        )
        .catch((error) => {})
    },
    showProjectList() {
      this.isShow = !this.isShow
    },
    selectProject(item, index) {
      const vm = this
      this.isShow = 'true'
      this.mark = index
      this.$nextTick(function () {
        vm.$store.commit('setEZhouprojectId', vm.projectOptions[index].name)
        vm.$store.commit(
          'setEZhouprojectName',
          vm.projectOptions[index].projectName
        )
        vm.$store.commit(
          'setEZhouVideoShowSrc',
          vm.projectOptions[index].remark
        )
        if (
          vm.projectOptions[index].remark != '默认云台' &&
          vm.projectOptions[index].remark
        ) {
          vm.$store.commit('setIsShowVideo', true)
        } else {
          vm.$store.commit('setIsShowVideo', false)
        }
        vm.$refs.videoSurveil.getAccessToken()
        vm.$refs.videoSurveil.changeSonSize()
        vm.$refs.videoSurveil.getProjectdetail()
      })
    },
    /**
     * @description: 下一个项目
     */
    nextProject() {
      const vm = this
      if (this.mark == 0) {
        this.mark = this.projectOptions.length
      }
      this.mark--
      this.$nextTick(function () {
        vm.$store.commit('setEZhouprojectId', vm.projectOptions[this.mark].name)
        vm.$store.commit(
          'setEZhouprojectName',
          vm.projectOptions[this.mark].projectName
        )
        vm.$store.commit(
          'setEZhouVideoShowSrc',
          vm.projectOptions[this.mark].remark
        )
        if (
          vm.projectOptions[this.mark].remark != '默认云台' &&
          vm.projectOptions[this.mark].remark
        ) {
          vm.$store.commit('setIsShowVideo', true)
        } else {
          vm.$store.commit('setIsShowVideo', false)
        }
        vm.$refs.videoSurveil.getAccessToken()
        vm.$refs.videoSurveil.changeSonSize()
        vm.$refs.videoSurveil.getProjectdetail()
      })
    },
    /**
     * @description: 上一个项目
     */
    previousProject() {
      const vm = this
      this.mark++
      if (this.mark == this.projectOptions.length) {
        this.mark = 0
      }
      this.$nextTick(function () {
        vm.$store.commit('setEZhouprojectId', vm.projectOptions[this.mark].name)
        vm.$store.commit(
          'setEZhouprojectName',
          vm.projectOptions[this.mark].projectName
        )
        vm.$store.commit(
          'setEZhouVideoShowSrc',
          vm.projectOptions[this.mark].remark
        )
        if (
          vm.projectOptions[this.mark].remark != '默认云台' &&
          vm.projectOptions[this.mark].remark
        ) {
          vm.$store.commit('setIsShowVideo', true)
        } else {
          vm.$store.commit('setIsShowVideo', false)
        }
        vm.$refs.videoSurveil.getAccessToken()
        vm.$refs.videoSurveil.changeSonSize()
        vm.$refs.videoSurveil.getProjectdetail()
      })
    },
  },
}
</script>
<style lang="less" scoped>
.container {
  overflow: hidden;
  height: calc(100% - 56px);
  .screen {
    height: 100%;
    padding: 10px;
    .elcol {
      height: 100%;
      .drawbg {
        height: 100%;
        background: url('../../assets/boxbg.png') center center no-repeat;
        background-size: 100% 100%;
        position: relative;
        .title {
          height: 22px;
          position: absolute;
          top: 10px;
          left: 10px;
          font-size: 16px;
          line-height: 22px;
          color: #ffffff;
          letter-spacing: 0;
          font-weight: bold;
          &::before {
            content: '';
            background: #fed857;
            display: inline-block;
            width: 5px;
            height: 16px;
            margin-right: 10px;
            position: relative;
            top: 2px;
          }

          .desc {
            font-size: 14px;
            color: #7a8b9b;
          }
        }
        .titleProjectOutput {
          height: 22px;
          font-size: 16px;
          margin-top: -10px;
          margin-bottom: 10px;
          line-height: 22px;
          color: #ffffff;
          letter-spacing: 0;
          font-weight: bold;
          &::before {
            content: '';
            background: #fed857;
            display: inline-block;
            width: 5px;
            height: 16px;
            margin-right: 10px;
            position: relative;
            top: 2px;
          }
          .desc {
            font-size: 14px;
            color: #7a8b9b;
          }
        }
        .info {
          width: 100%;
          font-size: 14px;
          color: #7193b2;
          text-align: center;
          position: absolute;
          top: 50px;
          left: 0;
          .dataNum {
            font-size: 20px;
            font-weight: bold;
            color: #53ffac;
            margin-bottom: 5px;
          }
        }
        .chartbg {
          height: 100%;
          overflow: hidden;
          .drawSelf {
            margin-top: 40px;
            height: calc(100% - 40px);
            padding: 10px;
            .drawSelfLi {
              height: calc(100% / 5);
              padding: 10px 0;
              border-top: 1px solid #1c405b;
              position: relative;
              &:last-child {
                border-bottom: 1px solid #1c405b;
              }
              .inlineB {
                height: 100%;
              }
              .imageBox {
                width: 34px;
                height: 36px;
                img {
                  width: 34px;
                  height: 36px;
                  position: absolute;
                  right: 5px;
                  top: 0;
                  bottom: 0;
                  margin: auto;
                }
              }
              .progress {
                width: calc(100% - 50px);
                height: 100%;
                line-height: 100%;
                .autoProgress {
                  // float: left;
                  vertical-align: top;
                  display: inline-block;
                  margin-top: 22px;

                  width: 100%;
                  height: 10px;
                  background-image: linear-gradient(
                    270deg,
                    #fed857 2%,
                    rgba(83, 255, 172, 0) 100%
                  );
                  border-radius: 5px;
                  border-radius: 5px;
                }
                .titleInfo {
                  // float: left;
                  display: inline-block;
                  margin-top: 10px;
                  p {
                    height: 50%;
                    text-align: center;
                  }
                  .name {
                    font-size: 12px;
                    color: #ffffff;
                  }
                  .value {
                    font-size: 14px;
                    color: #fed857;
                  }
                }
              }
            }
          }
        }
        #complaint {
          padding: 20px 0px 0px 0px;
        }
      }
      .left {
        width: 100%;
        height: calc((100% - 20px) / 3);
      }
      .employ {
        width: 100%;
        height: calc(50% - 19px);
      }
      .ille {
        width: 100%;
        height: 30%;
      }
      .workInjury {
        width: 100%;
        height: 20%;
      }
      .searchproject {
        width: 100%;
        height: 33px;
        background-color: pink;
      }
      .enterpriseStatistics {
        width: 100%;
        height: 20%;
      }

      .warningCenter {
        width: 100%;
        height: calc((80% - 20px) / 2);
      }
      .complaintHandling {
        width: 100%;
        height: calc((80% - 20px) / 2);
      }
      .right {
        width: 100%;
        height: 100%;
      }
      .middleTop {
        height: calc(50% - 23px);
        margin-bottom: 10px;
        .projectOutputTable {
          width: 100%;
          height: calc(100% - 5px);
          padding: 20px 10px 0px 5px;
        }
      }
      .middleBottom {
        height: calc(50% - 20px);
      }
      .middleSearch {
        padding: 0px 15px;
        height: 33px;
        cursor: pointer;
        margin-bottom: 3px;
        background-image: url('../../assets/searchbg.png');
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .middleSearchBox {
        width: calc(100% - 45px);
        padding: 0px 15px;
        height: 33px;
        cursor: pointer;
        margin-bottom: 3px;
        background-image: url('../../assets/searchbg.png');
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .setBtn {
        width: 43px;
        height: 33px;
        text-align: center;
        margin-top: 7px;
        .setIcon {
          width: 20px;
          height: 20px;
          display: inline-block;
          background-image: url('../../assets/setImg.png');
          background-size: 100% 100%;
          cursor: pointer;
        }
      }
      .realNameBox {
        z-index: 2005;
        margin-top: 9px;
        /deep/.searchInputWidth .el-input__inner,
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner,
        .searchInputWidth .el-input--suffix .el-input__inner {
          width: 110px;
          height: 30px;
          line-height: 20px;
          z-index: 9999;
          position: absolute;
          right: 5px;
          top: 5px;
          background-color: #1d4160;
        }
        /deep/.el-input__icon {
          line-height: 37px;
        }
        /deep/.el-input__inner {
          height: 30px;
          background-color: #1d4160;
          color: #fff;
          border: 0px;
        }
        /deep/.el-picker-panel__body {
          background-color: #1d4160 !important;
        }
      }
    }
  }
}
.fullCon {
  height: calc(100% - 70px) !important;
}
@media screen and (max-height: 500px) {
  .container {
    min-height: 440px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }
}
.searchIconLeft {
  width: 6px;
  height: 12px;
  background-image: url('../../assets/leftIcon.png');
  background-size: 100% 100%;
}
.searchIconRight {
  width: 6px;
  height: 12px;
  background-image: url('../../assets/rightIcon.png');
  background-size: 100% 100%;
}
.projectName {
  cursor: pointer;
  width: 100%;
  padding: 0 4px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  span {
    font-size: 14px;
    font-family: Source Han Sans CN;
    font-weight: 500;
    color: #5bfcf4;
    line-height: 70px;
  }
}
.projectVideo {
  position: relative;
  .searchList {
    width: calc(100% - 11px);
    overflow: auto;
    position: absolute;
    top: 33px;
    left: 5px;
    z-index: 999;
    background: #132b46;
    // background-image: url("../../assets/searchProjectBg.png");
    border: 1px solid #00f6ff;
    opacity: 0.8;
    border-radius: 6px;
    background-size: 100% 100%;
    opacity: 0.9;
    padding: 10px 0px;
    li {
      height: 30px;
      width: 100%;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
      cursor: pointer;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #b8e8fa;
    }
    li:hover {
      color: #5bfcf4;
    }
  }
}
.projectSearchBox {
  width: 100%;
  height: 33px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
